<script lang="ts" setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useSystemStore } from '@/stores/system'
import { useUserStore } from '@/stores/user'
import { useStyleStore } from '@/stores/style'
import { useSocketStore } from '@/stores/socket'
import { useScrollStore } from '@/stores/scroll'
import { useTemporaryStore } from '@/stores/temporary'

const route = useRoute()

// 初始化 pinia
const systemStore = useSystemStore()
const userStore = useUserStore()
const styleStore = useStyleStore()
const socketStore = useSocketStore()
const temporaryStore = useTemporaryStore()
const scrollStore = useScrollStore()

const openPreview = ref<boolean>(false)
// 图片预览
watch(
  () => systemStore.imgPreview.imgUrl,
  () => {
    if (systemStore.imgPreview.imgUrl !== '') {
      openPreview.value = true
    }
  },
  {
    deep: true
  }
)

onMounted(() => {
  // 禁用浏览器默认右键菜单
  // disableInfo()
  /* 监听离开页面 */
  let timer: any
  document.addEventListener('visibilitychange', (r: any) => {
    switch (r.target.visibilityState) {
      case 'hidden':
        document.title = '😱😱😱不要走！再看看嘛！'
        systemStore.system.isLeave = true
        break
      case 'visible':
        document.title = '😁😁😁欢迎肥来！'
        systemStore.system.isLeave = false
        timer = setTimeout(() => {
          document.title = 'UTOPIA'
          clearTimeout(timer)
        }, 3000)
        break
    }
  })
})

const disableInfo = () => {
  // 屏蔽 F12 键
  document.addEventListener('keydown', (e) => {
    if (e.code === 'F12') {
      e.preventDefault()
      e.stopPropagation()
      return false
    }

    console.log(e.code)
    // 屏蔽 Ctrl + Shift + I
    if (e.ctrlKey && e.shiftKey && e.code === 'KeyI') {
      e.preventDefault()
      e.stopPropagation()
      return false
    }

    // 屏蔽 Shift + F10
    if (e.shiftKey && e.code === 'F10') {
      e.preventDefault()
      e.stopPropagation()
      return false
    }
  })

  // 屏蔽右键单击
  document.addEventListener('contextmenu', (e) => {
    e.preventDefault()
    e.stopPropagation()
    return false
  })
}
</script>

<template>
  <el-config-provider :locale="zhCn">
    <!-- 图片预览 -->
    <el-dialog
      v-model="openPreview"
      :show-close="false"
      center
      class="img-view min-w-[70%] max-sm:min-w-[90%]"
      style="
        overflow: hidden;
        padding: 6px 5px 0 5px;
        max-width: calc(10vw - 40px);
        border-radius: 15px;
      "
      @close="systemStore.imgPreview.imgUrl = ''"
    >
      <el-image
        :src="systemStore.imgPreview.imgUrl"
        alt="Preview Image"
        class="use-radius"
        fit="cover"
      />
    </el-dialog>
    <el-container class="use-theme use-transitions-colors">
      <RouterView v-slot="{ Component }" name="root">
        <component :is="Component" />
      </RouterView>
    </el-container>
    <SearchDialog />
    <SettingDialog />
  </el-config-provider>
</template>

<style lang="scss">
@font-face {
  font-family: 'OpenSans';
  src: url('./assets/font/OpenSans.ttf');
}

@font-face {
  font-family: 'awesome';
  src: url('./assets/font/awesome.ttf');
}

* {
  font-family: OpenSans, sans-serif !important;
  font-weight: 520;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 1px;
  scroll-behavior: auto;
  overscroll-behavior: contain;
  background-color: transparent;
}

/* 图片预览 */
.img-view {
  .el-dialog__header {
    padding: 0 !important;
  }
}

html,
body,
.el-main,
.el-aside,
.el-header,
.el-container {
  overflow: hidden !important;
}
</style>
